import React from "react";
import { Button, message, Space, Typography, Card, Divider } from "antd";
import {
  DeleteOutlined,
  ExclamationCircleOutlined,
  WarningOutlined,
} from "@ant-design/icons";
import useConfirm from "@/components/useConfirm";
import "./styles/ConfirmDemo.less";

const { Title, Paragraph, Text } = Typography;

const ConfirmDemo: React.FC = () => {
  const confirm = useConfirm();

  // 基础确认对话框
  const handleBasicConfirm = async () => {
    try {
      await confirm({
        title: "操作确认",
        content: "确定要执行此操作吗？",
      });
      message.success("操作已确认");
    } catch (error) {
      console.log("用户取消了操作");
    }
  };

  // 危险操作确认对话框
  const handleDangerConfirm = async () => {
    try {
      await confirm({
        title: "确认覆盖现有配置吗？",
        description: "应用此提示词，将覆盖现有配置项。",

        danger: true,
      });
      message.success("删除成功");
    } catch (error) {
      console.log("用户取消了删除操作");
    }
  };

  // 自定义内容确认对话框
  const handleCustomConfirm = async () => {
    try {
      await confirm({
        title: "发布确认",
        content: (
          <div>
            <Paragraph>您即将发布以下内容：</Paragraph>
            <div className="custom-content">
              <Text strong>标题：</Text>
              <Text>如何使用React Hooks改善代码质量</Text>
            </div>
            <div className="custom-content">
              <Text strong>状态：</Text>
              <Text type="success">审核通过</Text>
            </div>
            <div className="custom-content">
              <Text strong>发布时间：</Text>
              <Text>立即发布</Text>
            </div>
          </div>
        ),
        okText: "立即发布",
        width: 500,
      });
      message.success("发布成功");
    } catch (error) {
      console.log("用户取消了发布");
    }
  };

  return (
    <div className="confirm-demo">
      <Title level={2}>二次确认对话框</Title>
      <Paragraph>
        基于Modal组件封装的二次确认对话框，使用Hook方式调用，支持Promise和自定义内容。
      </Paragraph>

      <Divider />

      <Space direction="vertical" size="large" style={{ width: "100%" }}>
        <Card title="基础用法" className="demo-card">
          <Paragraph>基础的确认对话框，用于常规操作确认。</Paragraph>
          <Button type="primary" onClick={handleBasicConfirm}>
            普通确认
          </Button>
        </Card>

        <Card title="危险操作确认" className="demo-card">
          <Paragraph>用于危险操作的确认对话框，如删除操作。</Paragraph>
          <Button
            danger
            onClick={handleDangerConfirm}
            icon={<DeleteOutlined />}
          >
            删除操作
          </Button>
        </Card>

        <Card title="自定义内容" className="demo-card">
          <Paragraph>支持自定义复杂内容的确认对话框。</Paragraph>
          <Button type="primary" onClick={handleCustomConfirm}>
            带自定义内容的确认
          </Button>
        </Card>
      </Space>
    </div>
  );
};

export default ConfirmDemo;
